<template>
	<div id="app">
		<!-- 头部 -->
		<div class="head">
			<!-- <div class="line"></div> -->
			<img src="@/assets/image/文化馆logo.png" alt="" />
			<!-- 导航菜单 -->
			<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
			 background-color="#F19417" text-color="#fff" active-text-color="#FFFFFF">
				<el-menu-item v-for="(item, index) in titlelists" :key="index" @click="jump(item.url,item.title)" :index="index.toString()">
					<div class="listText">
						{{ item.title }}
					</div>
				</el-menu-item>
			</el-menu>
			<!-- 个人中心 -->
			<span class="iconfont" @click="menu">&#xe659;<span>个人中心</span> </span>
		</div>
		<div style="width:100%;height:92px"></div>
		<router-view/>
		
		<footerBox></footerBox>
	</div>
</template>

<script>
import footerBox from '@/components/commen/footers'
	export default {
		components:{footerBox},
		name: "App",
		data(){
          return {
		   activeIndex2: '0',
		   titlelists: [
				"首页",
				"关于本馆",
				"辅导培训",
				"文化活动",
				"场馆预约",
				"非遗文化 ",
				"特色资源 ",
				"新闻公告 ",
				"视频直播",
				"志愿服务",
				"总分馆",
			],
			obj:{}
		  }
		},
        methods:{
			// 点击跳转到登录页面
			menu(){
				// console.log("1111111111")
				this.$router.push("/logIn")
				// this.$router.push("/menu/signInCalendar")
			},
			getRouteList(){ //获取动态导航
				  this.titlelists = []
				  for(let i in this.obj){
					  if(this.obj[i].is_show == 1 && this.obj[i].lvl == 1){
                          this.titlelists.push(this.obj[i])
					  }
				  }
				//   console.log(this.titlelists)
			},
			//导航菜单
			handleSelect(key, keyPath) {
				console.log(key,keyPath);
			},
			jump(url,title){
				this.$router.push(url)
				if(title== '文化活动'){
					this.$router.push('/culturalActivity/community')
				}
			}
		},
		mounted(){
			  this.$request.getRouteList({}).then(res=>{ //获取路由
				    this.obj = res.data
			        this.getRouteList()
			  })
		}
	}
</script>
<style>
	body{
		width:100%;
		overflow-x:hidden;
	}
	#app{
		background-color: #F9F9F9!important;
		min-width: 1366px;
	}
	</style>
<style scoped lang="less">
	@import url("./assets/reset.css");
	.head {
		position: fixed;
		width: 100%;
		height: 92px;
		background-color: #f19417;
		z-index: 999;
		line-height: 92px;
		img {
			margin-left: 6.1%;
			margin-top: 20px;
			width: 12.4%;
			height: 56px;
			float: left;
		}
		.el-menu-demo {
			margin-left: 60px;
			border: none;
			width: 66%;
			height: 92px;
			float: left;
			li {
				margin-left: 1.5%;
				text-align: center;
				width: 7.1%;
				height: 92px;
				line-height: 92px;	
			}
			.el-menu-item {
				padding: 0;
			}
		}
		span {
			color: white;
			span {
				font-size: 14px;
				margin-top: -2px;
			}
		}
	}
</style>
